<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>服装款式</title>
    <%@ include file="/WEB-INF/views/include/head.jsp"%>
    <script src="${ctxStatic}/js/jquery-1.9.1.min.js"></script>
    <script src="${ctxStatic}/js/DateTimePicker.js"></script>
    <script src="${ctxStatic}/js/layer.js"></script>
    <script src="${ctxStatic}/js/style.js"></script>
   	<script src="${ctxStatic}/dateCalendar/WdatePicker.js"></script>
   	<script type="text/javascript" src="${ctxStatic}/producePlanJsView/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="${ctxStatic}/producePlanJsView/date.js"></script>
    <script type="text/javascript" src="${ctxStatic}/producePlanJsView/jquery-ui-1.8.4.js"></script>
    <script type="text/javascript" src="${ctxStatic}/producePlanJsView/jquery.ganttView.License.js"></script>
    <link rel="stylesheet" href="${ctxStatic}/css/common_erp.css">
    <link rel="stylesheet" href="${ctxStatic}/css/list.css">
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/producePlanJsView/jquery-ui-1.8.4.css" />
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/producePlanJsView/reset.css" />
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/producePlanJsView/jquery.ganttView.css" />
    <script>
    var ganttData = [
                     <c:forEach items="${licenseList}" varStatus="status" var="license">
                 {
                     No: "${status.index+1}",
                     productionNO: "${license.productionNO}",
                     cus:"${license.ognizationName}",
                     proQuantity:"<fmt:formatNumber value="${license.proQuantity}" pattern="#,##0" />",
                     dataCount:"<fmt:formatNumber value="${license.dataCount}" pattern="#,##0" />",
                     dataRate:"<fmt:formatNumber value="${license.dataRate}" pattern="#,##0.00" />%",
                     startDate:"<fmt:formatDate value="${license.proBeginDate}" pattern="yyyy-MM-dd" />",
                     endDate:"<fmt:formatDate value="${license.proEndDate}" pattern="yyyy-MM-dd" />",
                     deliveryDate:"<fmt:formatDate value="${license.proDeliveryDate}" pattern="yyyy-MM-dd" />",
                     proPeriod:"<fmt:formatNumber value="${license.proPeriod+(1-(license.proPeriod%1))%1}" type="number" pattern="#" />",
                     groupName:"${license.groupName}",
                     tempid:"${license.id}",
                     proStatus:"${license.proStatus}",
                     series: [ { name: "生产制单",  start: new Date("<fmt:formatDate value="${license.proBeginDate}" pattern="yyyy-MM-dd" />"), end: new Date("<fmt:formatDate value="${license.proEndDate}" pattern="yyyy-MM-dd" />") }]
                 }
                 <c:if test="${!status.last}">,</c:if>
                 </c:forEach>
             ];

             $(function () {
                 $("#ganttChart").ganttView({
                     data: ganttData,
                     slideWidth: 900
                 });
             	$("#test_Right")[0].scrollTo($("#test_Right")[0].scrollWidth,0);
             });
             
    $(document).ready(function() {
    	$("#userGroupID").select2();
        $(window.parent.$('#dtBox1')).DateTimePicker(
                {
                    dateFormat: "yyyy-MM-dd HH:mm",
                    parentElement: ".timeBox",
                }
        );

    });
	
    $(function(){
        $(".tabBox ul li").each(function(){
            var index=$(this).index();

            $(".tabBox ul li").eq(0).addClass("active");

            $(this).click(function(){

                //alert(index);

                $(this).addClass("active").siblings().removeClass("active");

                //$(".tabBoxSm > .tabSm").eq(index).stop(true).show().siblings().stop(true).hide();
				$("#ulSelected").val($(this).val());
				searchListForm();
				var tableW = $(".tabBoxSm > .tabSm").eq(index).find('.tableHead').width();
				var tabodyH = $(".tabBoxSm > .tabSm").eq(index).find('.tableBody').height();
				var tableScrollH = $(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').height();
				if(tabodyH>tableScrollH){
					$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width',tableW + 18 + 'px')
				}else{
					$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width','inherit')
				}

            })

        })

    })
        
        //检索 
    function searchListForm() {
    	/* var params = $("#searchForm").serialize();
    	$("#activity_pane").showLoading();
		$.post("${ctx}/produce/license/searchList",params, function(result) {
			var listHtml = result["produceLicense"];
			var pageHtml = result["page"];
			$("#listHtml").html(listHtml);
			$("#paging").html(pageHtml);
			$("#activity_pane").hideLoading();
		}, 'json'); */
    	$("#searchForm").submit();
		
    	
	}
        
	//重置
	function clean() {
		$("input").val("");
		$("select").val("");
		$("#userGroupID").select2();
		searchListForm();
	}   
	
	//JS代码
	var timer = null;
	//左侧DIV的滚动事件
	function moveUp_Left()
	{
	    //先删除右侧DIV的滚动事件，以免自动触发
	    $("#test_Right").removeAttr("onScroll");

	    //正常设值，同步两个DIV的滚动幅度
	    $("#test_Right").scrollTop($("#test_Left").scrollTop());
	    
	    //取消延迟预约。【重点】鼠标滚动过程中会多次触发本行代码，相当于不停的延迟执行下面的预约
	    clearTimeout(timer);

	    //延迟恢复（预约）另一个DIV的滚动事件，并将本预约返回给变量[timer]
	    timer = setTimeout(function() {
	        $("#test_Right").attr("onScroll","moveUp_Right();");
	    }, 300 );
	}

	//右侧DIV的滚动事件（原理同上）
	function moveUp_Right()
	{
	    $("#test_Left").removeAttr("onScroll");
	    $("#test_Left").scrollTop($("#test_Right").scrollTop());
	    clearTimeout(timer);
	    timer = setTimeout(function() {
	        $("#test_Left").attr("onScroll","moveUp_Left();");
	    }, 300 );
	}
    </script>
    <style type="text/css">
    /* 采购合同号  */
    .table-cghth{width: 100px}
    /* 供货商(乙方) */
    .table-cgghs{width: 120px}
    /* 种类  */
    .table-cgzl{width: 80px}
    /* 订料数量  */
    .table-cgdlsl{width: 100px}
    /* 订料金额  */
    .table-cgdlje{width: 100px}
    /* 签订日期  */
    .table-cgqdrq{width: 100px}
    /* 结算日期  */
    .table-cgjsrq{width: 100px}
    /* 预订到料日期  */
    .table-cgyddl{width: 100px}
    /* 实际到料日期  */
    .table-cgsjdl{width: 100px}
    /* 创建人员  */
    .table-cgcjr{width: 80px}
    /* 创建时间  */
    .table-cgcjrq{width: 100px}
    
    </style>
</head>
<body>
<form id="searchForm">
<div class="listArea" id="activity_pane">
	<div class="listBg">
        <div class="searchArea clearfix">
            <div class="searchLeft clearfix">
                <div class="searchInp clearfix">
                <!-- 客户名称  -->
                    <p>客户名称</p>
                    <input class="w-styleNub" name="ognizationName" value="${ognizationName}">
                </div>
                <div class="searchInp clearfix">
                <!-- 班组名称  -->
                    <p>班组名称</p>
                    <div class="searchInp">
                            <select  name="userGroupID" id="userGroupID" style="width: 120px">
                                <option value="0"><spring:message code="order_please_choose"/></option>
                                <c:forEach items="${groupList}" var="group">
                                    <option value="${group.userGroupID}" <c:if test="${group.userGroupID == userGroupID}"> selected </c:if>>${group.groupName}</option>
                                </c:forEach>
                            </select>
                        </div>
                </div>
                <div class="searchInp clearfix">
                <!-- 日期  -->
                    <p><spring:message code="purchase_contract_date" /></p>
                    <div class="timeBox">
							<input type="text" class="laydate-icon" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd',onpicked:null})"
								id="dateStart" name="dateStart" style="width: 110px" value="${dateStart}">
							<p class="list">~</p>
							<input type="text" class="laydate-icon" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd',onpicked:null})" id="dateEnd" name="dateEnd"
								style="width: 110px" value="${dateEnd}">
                    </div>        
                </div>               
            </div>
            <div class="searchRight clearfix">
                <button type="button" onclick="searchListForm();"><spring:message code="commom_check" /></button>
                <button type="button" onclick="clean();"><spring:message code="common_reset" /></button>
                <button type="button" onclick="popup('1000px','650px','${ctx}/produce/license/createLicense')"><spring:message code="purchase_contract_create" /></button>
            </div>
        </div>
    <!-- </div>
        <input type="hidden" id="ulSelected" name="ulSelected" value="">
    
    <div class="tabBox">
        <ul class="clearfix">
            <li class="active" value="-1">全部</li>
            <li value="0">生产中</li>
            <li value="1">生产完成</li>
        </ul>
	</div>
    <div class="listBg tabPadding overflowX"> -->
        <%-- <div class="tableArea">
            <div class="tableScrollSm" style = "height:650px;overflow: auto;width: 1765px;">
                <table cellpadding="0" class="tableHead">
                    <thead>
                    <tr>
                        <th><p class="table-No"><spring:message code="common_no" /></p></th>
                        <th><p class="width-150px">生产制单号</p></th>
                        <!-- <th><p class="width-150px">款号/款式名称</p></th> -->
                        <th><p class="table-cgghs">客户名称</p></th>
                        <!-- <th><p class="width-150px">客户订单号</p></th> -->
                        <!-- <th><p class="width-150px">交货日期</p></th> -->
                        <th><p class="table-cgdlje">制单数量</p></th>
                        <th><p class="table-cgdlje">完成数量</p></th>
                        <th><p class="table-cgdlje">完成进度</p></th>
                        <th><p class="table-cgyddl">生产班组</p></th>
                        <!-- <th><p class="width-80px">投产人数</p></th> -->
                        <th><p class="width-80px">生产周期</p></th>
                        <th><p class="table-cgdlje">投产日期</p></th>
                        <th><p class="table-cgdlje">清活日期</p></th>
                        <th><p class="table-cgdlje">实际交货日期</p></th>
                        <!-- <th><p class="width-100px">详情</p></th> -->
                    </tr>
                    </thead>
                </table>
                <table cellpadding="0" class="tableBody">
                    <tbody id="listHtml">
                    <tr>                       
                    </tr>
                    </tbody>
                </table>
            </div>            
        </div> --%>
        <div class="listBg tabPadding overflowX">
        <div class="tableArea tabBoxSm">
            <div class=" tabSm">
                <div id="ganttChart"></div>
                <br/><br/>
                <div id="eventMessage"></div>
            </div>            
        </div>
    </div>
    </div>
    <div id = "paging" ></div>
   
<script type="text/javascript">
$(document).ready(function(){
	searchListForm();
	
	})

</script> 
</div>
</form>
</body>
</html>
